<template>
	<view class="container">
		<Loading v-if="loading">正在加载中...</Loading>
		<template v-else>
			<view class="m1">
				<view class="tag">{{ routeDetail.category }}</view>
				<view>
					<view class="title">{{ routeDetail.name }}</view>
				</view>	
				<view class="record">{{routeDetail.distance}}KM {{routeDetail.time}}h</view>
				<view class="btn" @click.stop="handleMakeTravel" role="button">出行</view>
			</view>
			
			<view class="m2">
				<text>路线详情</text>
				<image aria-label="修改或删除此路线" src="@/static/feed.svg" class="icon"  @click.native="handleModifyRoute" role="button"></image>
			</view>
			
			<view class="m3">
				<scroll-view scroll-y class="s3">
					<ul>
						<li v-for="(spot,index) in routeDetail.routeAttractionsList" :key="index">
							<view class="v1">
								<view class="pic">
									<image :aria-label="spot.name+'照片'" :src="spot.img" mode="aspectFill" :alt="spot.name"></image>
								</view>
								<view class="v2">
									<view class="third-heading--main spot-desc">{{ spot.name }}</view>
									<view class="third-heading--sub spot-desc">{{ spot.description || "无相关标注" }}</view>
								</view>
							</view>
							<view class="v3">
								<img :src="'../../static/numbers/'+(index+1)+'.svg'" alt="" class="icon">
							</view>
						</li>
					</ul>
				</scroll-view>
			</view>
			
			<view class="m4">
				<ul>
					<li>
						<image src="@/static/coin.svg" class="icon" aria-label="路线花费">
						<text>{{routeDetail.amount}}元</text>
					</li>
					<li>
						<image src="@/static/distance.svg" class="icon" aria-label="路线长度">
						<text>{{routeDetail.distance}}km</text>
					</li>
					<li>
						<image src="@/static/time.svg" class="icon" aria-label="路线备注">
						<text>{{routeDetail.time}}h</text>
					</li>
				</ul>
			</view>
		</template>
	</view>
</template>

<script>
	import Loading from "@/components/Loading/Loading.vue"
	import * as RouteApi from "@/api/route/route.js"
	import * as AssistApi from "@/api/assist/blind.js"
	import {REFRESH_ROUTES,REFRESH_TRAVEL_REQUEST} from "@/core/constant/event.js"
	export default {
		components:{
			Loading	
		},
		data() {
			return {
				routeId:0,
				routeDetail:{},
				loading:true
			}
		},
		methods: {
			async handleMakeTravel(){
				try{
					const params = {routeId:this.routeId}
					await AssistApi.makeTravel(params)
					uni.$emit(REFRESH_TRAVEL_REQUEST)
					this.$navTo("pages/xzhu/xzhu")
				
				}catch(err){
					console.log(err)
					this.$error(err.errMsg || "操作失败")
				}			
			},
			handleRemoveRoute(){
				const app = this
				const config = {
					content:"你确定要删除当前路线吗?",
					url:"pages/chux/chux"
				}
				this.$confirm(config,app.onRemoveRoute,null)
			},
			handleEditRoute(){
				const action = 'edit'
				const routeDetail = {id:this.routeId,
									...this.routeDetail}
				this.$store.dispatch("route/setRoute",routeDetail)
				this.$navTo("pages/chux/addroute3",{action})
			},
			handleShareRoute(){
				this.$toast("分享路线功能暂未开发~")
			},
			handleModifyRoute(){
				const app = this
				uni.showActionSheet({
					itemList: ['删除路线', '修改路线', '分享路线'],
					success (res) {
					   // 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
					   const action = res.tapIndex
					   switch(action){
						   case 0:
						      app.handleRemoveRoute()
							  break
						    case 1:
							  app.handleEditRoute()
							  break
						    case 2:
							  app.handleShareRoute()
							  break
					   }
					}
				})
			},
			onRemoveRoute(){
				RouteApi.deleteRoute(this.routeId)
						.then(res => uni.$emit(REFRESH_ROUTES))
			},
			// 获取路线信息
			getRouteDetail() {
				const app = this
				return new Promise((resolve, reject) => {
				  RouteApi.routeDetail(app.routeId)
					.then(data => {
					  app.routeDetail = data
					  resolve(data)
					})
					.catch(reject)
				})
			  },
			async onRefreshPage(){
				await this.getRouteDetail()
			}
			},
		async onLoad(options) {
		  // 记录商品ID
		  this.routeId = parseInt(options.routeId)
		  // 加载页面数据
		  await this.onRefreshPage()
		  this.loading = false
		},
		
	}
</script>

<style lang="scss">
	page{
		width:100vw;
		height:100%;
		background: #fff;
	}
	.container{
		position:relative;
		
		width:600rpx;
		height: 100vh;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30upx;
		
		padding:5%;
		margin:auto;
		
	}
	.m1{
		@include border-three-roundings;
		padding:20px 0px;
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40upx;
		color:#383838;
		.tag{
			text-align: center;
			border-radius: 48upx;
			padding:0px 16px;
			font-size: 16px;
			font-weight: 700;
			line-height: 68upx;
			background-color: #f7dacf;
			color: #d9480f;
			font-weight: 600;
		}
		.title{
			font-weight: 900;
			font-size: 60upx;
		}
		.describe{
			font-size: 40upx;
		}
		.record{
			font-size: 40upx;
			font-weight: 900;
		}
		.btn{
			width: 220upx;
			height: 80upx;
			border-radius: 80upx;
			border: 1px solid #333;
			text-align: center;
			line-height: 80upx;
			box-shadow: -20upx -20upx #ff8d1a;
			margin-left: 30upx;
			font-weight: 900;
			font-size: 40upx;
		}
	}
	.m2{
		height: 74upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 18upx;
		text{
			font-weight: 900;
			font-size: 40upx;
		}
		img{
			height: 50upx;
			width: 50upx;
		}
	}
	.m3{
		width: 100%;
		// background-color: #6e0;
		white-space: nowrap;
		.s3{
		}
		ul{
			display: flex;
			flex-direction: column;
			gap: 18upx;
			padding: 15upx;
			li{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.v1{
					display: flex;
					flex-direction: row;
					gap: 6upx;
					width:70%;
					.iv2{
						border-radius: 20upx;
						border: 1px solid #333;
						justify-items: center;
						align-items: center;
						text-align: center;
						img{
							width: 120upx;
							height: 120upx;
						}
					}
					.v2{
						width:60%;
						display: flex;
						flex-direction: column;
						gap: 8upx;
						.spot-desc{
							width:100%;
							text-overflow:ellipsis;
							white-space:nowrap;
							overflow: hidden;
						}
					}
				}
				.v3{
					font-size: 60upx;
					font-weight: 900;
					color: #ff922b;
					padding: 34upx;
					
				}
			}
		}
	}
	.m4{
		height: 60upx;
		width: 100%;
		// background-color: #ee0;
		ul{
			display: flex;
			flex-direction: row;
			gap: 80upx;
			justify-content: right;
			li{
				display: flex;
				flex-direction: row;
				gap: 4px;
				img{
					width: 36upx;
					height: 36upx;
				}
			}
		}
	}
	.m5{
		width: 100%;
		height: 200upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		img{
			width: 100upx;
			height: 100upx;
		}
	}
	.m6{
		// width: 500upx;
		.m6_1{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-items: center;
		}
		button{
			background-color: #333;
			height: 10upx;
			width: 120upx;
		}
		.v1{
			height: 10upx;
			width: 120upx;
			background-color: #333;
			margin: 10upx 320upx 10upx 320upx;
		}
		.v2{
			width: 500upx;
			height: 50upx;
			ul{
				display: flex;
				flex-direction: row;
				li{
					display: flex;
					flex-direction: row;
					.dout{
						height: 30upx;
						width: 30upx;
						border-radius: 30upx;
						text-align: center;
						line-height: 30upx;
						border: 1px solid #333;
					}
					.active{
						color: #333;
						background-color: #fff;
					}
					img{
						width: 30upx;
						height: 30upx;
					}
				}
			}
		}
		.v3{
			height: 160upx;
			border: 1px solid #333;
		}
		.v4{
			height: 220upx;
			border: 1px solid #333;
		}
	}
    .pic{
     	width: 68px;
     	height: 68px;
     	border-radius: 10px;
     	border: 1px solid rgba(0, 0, 0, 1);
     	overflow:hidden;
     	
     	image{
     		width:100%;
     		height:100%;
     	}
     }


</style>
